import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Empty, message } from 'antd';
import { connect } from 'dva';

import User from '@/pages/subSystem/user';
import PxFrame from '@/components/PxFrame';
import { fetchSearchParams } from '@/services/treeMenu';
import HistoryCard from '@/components/HistoryCard';
import AlarmCard from '@/components/AlarmCard';
import { PageLoading } from '@ant-design/pro-layout';

class TreeMenuContent extends Component {

  constructor(props) {
    super(props);
    this.state = {
      content: <></>
    }
  }

  componentWillReceiveProps(nextProps) {
    const { selectedTreeMenu, moduleType, $typeSpec } = nextProps;
    if(selectedTreeMenu && this.props.selectedTreeMenu) {
      if(nextProps.selectedTreeMenu.$handle !== this.props.selectedTreeMenu.$handle) {
        this.updateContent(selectedTreeMenu, moduleType, $typeSpec);
      }
    } else if(selectedTreeMenu || this.props.selectedTreeMenu) {
      this.updateContent(selectedTreeMenu, moduleType, $typeSpec);
    }
  }

  updateContent = (selectedTreeMenu, moduleType, $typeSpec) => {
    if($typeSpec==='ibmsSupervisor:UserModule') {
      this.setState({content: <User/>});
    } else if(selectedTreeMenu.treeMenuItemType === 'PX_VIEW') {
      this.setState({content: <PxFrame pxOrd={selectedTreeMenu.ord}/>});
    } else if(selectedTreeMenu.treeMenuItemType === 'SEARCH_PARAMS') {
      //历史查询 或 告警查询
      fetchSearchParams(selectedTreeMenu.ord).then((searchParams)=>{
        if(moduleType === 'HISTORY') {
          this.setState({content: <HistoryCard searchParams={searchParams}/>});
        } else if(moduleType === 'ALARM') {
          this.setState({content: (<AlarmCard searchParams={searchParams}/>)});
        } else {
          message.error('fetchSearchParams module setting error: ' + moduleType);
        }
      }).catch(error => {
        message.error('fetchSearchParams error: ' + error.message);
      })
    } else if(selectedTreeMenu.treeMenuItemType === 'IMAGE') {
      const content = (<img
          alt="example"
          style={{width:'100%',height:'100%'}}
          src={selectedTreeMenu.url?selectedTreeMenu.url:''}
        />);
      this.setState({content});
    } else if(selectedTreeMenu.treeMenuItemType === 'TEXT') {
      const content = (
        <Empty
          className={'empty'}
          image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
          imageStyle={{
            height: 60,
          }}
          description={
            <span>{selectedTreeMenu.url?selectedTreeMenu.url:''}</span>
          }
        >
        </Empty>);
      this.setState({content});
    } else if(selectedTreeMenu.treeMenuItemType === 'URL') {
      return false;
    } else {
      return false;
    }
  }

  render() {
    if(!this.props.selectedTreeMenu) {
      return <PageLoading/>;
    }
    return this.state.content;
  }
}

TreeMenuContent.propTypes = {
  moduleType: PropTypes.string.isRequired,
  $typeSpec: PropTypes.string.isRequired
}

export default connect(({ subModule }) => ({
  selectedTreeMenu: subModule.selectedTreeMenu
}))(TreeMenuContent);
